<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-emoji"></i> 自定义图标 </el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<h2>使用方法</h2>
			<p style="line-height: 50px">直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标）</p>
			<p class="example-p">
				<i class="el-icon-lx-redpacket_fill" style="font-size: 30px; color: #ff5900"></i>
				<span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
			</p>
			<p class="example-p">
				<i class="el-icon-lx-weibo" style="font-size: 30px; color: #fd5656"></i>
				<span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
			</p>
			<p class="example-p">
				<i class="el-icon-lx-emojifill" style="font-size: 30px; color: #ffc300"></i>
				<span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
			</p>
			<br />
			<h2>图标</h2>
			<div class="search-box">
				<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
			</div>
			<ul>
				<li class="icon-li" v-for="(item, index) in list" :key="index">
					<div class="icon-li-content">
						<i :class="`el-icon-lx-${item}`"></i>
						<span>{{ item }}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { computed, ref } from 'vue';
export default {
	name: 'Icon',
	setup() {
		const iconList = [
			'attentionforbid',
			'attentionforbidfill',
			'attention',
			'attentionfill',
			'tag',
			'tagfill',
			'people',
			'peoplefill',
			'notice',
			'noticefill',
			'mobile',
			'mobilefill',
			'voice',
			'voicefill',
			'unlock',
			'lock',
			'home',
			'homefill',
			'delete',
			'deletefill',
			'notification',
			'notificationfill',
			'notificationforbidfill',
			'like',
			'likefill',
			'comment',
			'commentfill',
			'camera',
			'camerafill',
			'warn',
			'warnfill',
			'time',
			'timefill',
			'location',
			'locationfill',
			'favor',
			'favorfill',
			'skin',
			'skinfill',
			'news',
			'newsfill',
			'record',
			'recordfill',
			'emoji',
			'emojifill',
			'message',
			'messagefill',
			'goods',
			'goodsfill',
			'crown',
			'crownfill',
			'move',
			'add',
			'hot',
			'hotfill',
			'service',
			'servicefill',
			'present',
			'presentfill',
			'pic',
			'picfill',
			'rank',
			'rankfill',
			'male',
			'female',
			'down',
			'top',
			'recharge',
			'rechargefill',
			'forward',
			'forwardfill',
			'info',
			'infofill',
			'redpacket',
			'redpacket_fill',
			'roundadd',
			'roundaddfill',
			'friendadd',
			'friendaddfill',
			'cart',
			'cartfill',
			'more',
			'moreandroid',
			'back',
			'right',
			'shop',
			'shopfill',
			'question',
			'questionfill',
			'roundclose',
			'roundclosefill',
			'roundcheck',
			'roundcheckfill',
			'global',
			'mail',
			'punch',
			'exit',
			'upload',
			'read',
			'file',
			'link',
			'full',
			'group',
			'friend',
			'profile',
			'addressbook',
			'calendar',
			'text',
			'copy',
			'share',
			'wifi',
			'vipcard',
			'weibo',
			'remind',
			'refresh',
			'filter',
			'settings',
			'scan',
			'qrcode',
			'cascades',
			'apps',
			'sort',
			'searchlist',
			'search',
			'edit',
		];
		const keyword = ref('');
		const list = computed(() => {
			return iconList.filter(item => {
				return item.indexOf(keyword.value) !== -1;
			});
		});

		return {
			iconList,
			keyword,
			list,
		};
	},
};
</script>

<style scoped>
.example-p {
	height: 45px;
	display: flex;
	align-items: center;
}
.search-box {
	text-align: center;
	margin-top: 10px;
}
.search {
	width: 300px;
}
ul,
li {
	list-style: none;
}
.icon-li {
	display: inline-block;
	padding: 10px;
	width: 120px;
	height: 120px;
}
.icon-li-content {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.icon-li-content i {
	font-size: 36px;
	color: #606266;
}
.icon-li-content span {
	margin-top: 10px;
	color: #787878;
}
</style>
